<template>
  <div>
    <!-- {{ C }} -->
    <el-input placeholder="请输入内容" v-model="keyWord" clearable @change="sendSearch">
      <template slot="prepend">关键字</template >
      <el-button slot="append" icon="el-icon-search" @click="sendSearch" ></el-button>
    </el-input>
    <el-empty v-if="searchResultList.length == 0" description="暂无数据"></el-empty>
    <ul class="list" v-if="searchResultList.length > 0">
      <li class="item" v-for="(v,i) in searchResultList" :key="i" @click="clickSingleItem($event,v)">
        <el-image class="face" :src="v.face" fit="cover"></el-image>
        <div class="cusInfo text-overflow">
          {{ v.nickname }}<br>
          {{ v.tel }}
        </div>
      </li>
    </ul>
    <div class="panel-footer dis-flex flex-cm">
      <el-pagination
        @current-change="searchPageChange"
        :current-page.sync="pages.current"
        :page-size="pages.size"
        layout="prev,pager,next"
        :total="pages.total">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex';
export default {
  name:'cusForm',
  computed: {
    ...mapState([]),
  },
  data() {
    const C = Object.assign({
      isStar:false,
      readingType: 0,
      replyType: 0,
      isNoReply: false,
      eSCompanyId: '',
      agentid: 0,
    },this.$store.getters.getCEID(false))
    return {
      isDev:process.env.NODE_ENV== 'development',
      C:C,
      keyWord:'',
      searchResultList:[],
      pages:{current:1,size:12,total:0,},
    }
  },
  methods: {
    test(){
      console.log(13)
    },
    clickSingleItem($event, item) {
      this.$emit('selectCus',item)
      return
    },
    /**/sendSearch() {
      if (this.keyWord.trim() == '') {
        this.$message({
          message: '请输入要搜索的内容',
          type: 'warning'
        })
        return;
      };
      let opt = Object.assign(
        this.C,
        {
          searchName: this.keyWord,
          page: this.pages.current,
          size: this.pages.size,
          state: 1,//获取客户列表需要
        }
      );
      this.$api.get_App_Cus(opt).then((res) => {
        this.pages.total = res.data.data.count;
        let list = res.data.data.list.map((v) => {
          let r = {
            id: v.userid,// 企业微信成员id
            eSCompanyId: v.eSCompanyId,//
            nickname: v.name, // 成员名称,可用户修改
            face: v.avatar, // 头像url
            // unread: v.noReadingCount,// 未读数,文档上没有标注
            // lastMsg: Boolean(v.lastMsg) ? v.lastMsg : '',// 最后一条消息内容
            // lastTime: v.lastMsgTime,// 最后一条消息时间
            tel: v.mobile, // 电话号码
            // type: v.lastMsgType,
          };
          return r;
        })
        this.searchResultList.splice(0, this.searchResultList.length);
        list.forEach((v) => {
          this.searchResultList.push(v)
        });
      }).catch((err) => {
        console.log(err)
      })
    },
    searchPageChange(current) {
      this.pages.current = current;
      this.sendSearch();
    },
  }
}
</script>

<style lang="less" scoped>
.list{
  vertical-align: top;
  padding-top:20px;
  .item{
    display:inline-block;
    vertical-align: top;
    line-height:40px;
    width:30%;height:88px;
    margin:5px 1%;
    padding:2px;
    border:1px solid #ccc;
    border-radius: 16px;
    .face{
      position: absolute;
      top:2px;bottom:2px;left:2px;
      width:80px;
      height:80px;
      border-radius: 50%;
    }
    .cusInfo{
      margin-left:90px;
    }
  }

}

</style>